<template>
  <div class="dashboard-container">
    <h1 class="panel-title">数据总览</h1>
    <panel-group :data="totalData" />
    <h1 class="panel-title">今日数据</h1>
    <panel-group :data="todayData" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDashData } from '@/api/common'
import PanelGroup from './components/PanelGroup'
export default {
  name: 'Dashboard',
  components: {
    PanelGroup
  },
  data() {
    return {
      totalData: [],
      todayData: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await getDashData()
      const data = res.data.statistics_info
      this.totalData = [
        { icon: 'peoples', name: '总用户数', data: [data.history_user_total] },
        { icon: 'money', name: '总流水', data: [data.history_pay_money] },
        { icon: 'people', name: '总发起次数/发起用户数', data: [data.history_initiate_wish_num, data.history_initiate_user_num] },
        { icon: 'people', name: '总成单数/成单用户数', data: [data.history_group_success_num, data.history_group_success_user_num] }
      ]
      this.todayData = [
        { icon: 'peoples', name: '今日新增用户数', data: [data.today_user_total] },
        { icon: 'money', name: '今日流水', data: [data.today_pay_money] },
        { icon: 'people', name: '今日发起次数/发起用户数', data: [data.today_initiate_wish_num, data.today_initiate_user_num] },
        { icon: 'people', name: '今日成单数/成单用户数', data: [data.today_group_success_num, data.today_group_success_user_num] }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  .panel-title{
    font-size: 18px;
  }
}
</style>
